<template>
  <div>
    <h2>事件绑定指令</h2>
    <p>{{age}}</p>
    <!-- 事件绑定指令语法  v-on：时间名="处理程序"  v-on:可以简化成 @ -->
    <!-- <button v-on:事件名="处理程序">按钮</button> -->
    <!-- <button @事件名="处理程序">按钮</button> -->

    <!-- 事件处理程序，如果代码非常简单，直接写到<template></template>这个区域即可 -->
    <!-- 处理程序，代码只能使用vue中定义好的data数据或method方法 -->
    <button @click="age++">+1</button>

    <!-- 事件处理程序，如果代码非常多，可以用方法方法必须定义到和data平级的method中 -->
    <button @click="changAge">-1</button>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        age:20
      }
    },
    //methods是储存方法的
    methods:{
      changAge() {
        //vue中，找data数据，method方法......都是通过this直接找（这是vue中固定的语法
        this.age--
        console.log(123);
      }
    }
  }
</script>

<style>

</style>